<template>
    <div class="storeinformation">
        <div class="ba_f outmain">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>账号密码</span>
                </div>
            </div>
            <el-form ref="form4" :model="form4" :rules="rules4" label-width="180px">
                <el-form-item label="登录账号" prop="userName">
                    <el-input v-model="form4.userName" autocomplete="off" placeholder="请输入登录账号"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="password">
                    <el-input v-model="form4.password" type="password" autocomplete="off"
                              placeholder="请输入登录密码"></el-input>
                </el-form-item>
                <el-form-item label="绑定手机号" prop="bindTel">
                    <el-input v-model="form4.bindTel" autocomplete="off" placeholder="请输入绑定手机号"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
    </div>
</template>
<script>
    import attachmentImg from "@/plugins/attachment-img";
    import { getStoreAccount, posStoreAccount,} from "@/api/shop";
    import {mapState} from "vuex";

    export default {
        name: "storinformation",
        created() {
            // this.startLoading()
            // this.$baseColorfullLoading(1,'加载中');
            this.edit();
        },
        computed: {
            ...mapState(['storeId']),
        },
        components: {attachmentImg,},
        data() {
            var checkAccount = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('账号不能为空'));
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    // if (this.form4.checkPass !== '') {
                    //     this.$refs.form4.validateField('checkPass');
                    // }
                    callback();
                }
            };
            // var validatePass2 = (rule, value, callback) => {
            //     if (value === '') {
            //         callback(new Error('请再次输入密码'));
            //     } else if (value !== this.form4.password) {
            //         callback(new Error('两次输入密码不一致!'));
            //     } else {
            //         callback();
            //     }
            // };
            var checkTel = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                }
            };
            return {
                loading: true,
                form4: {
                    userName: '',
                    password: '',
                    // checkPass: '',
                    bindTel: '',
                },
                rules4: {
                    password: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    // checkPass: [
                    //     {validator: validatePass2, trigger: 'blur'}
                    // ],
                    userName: [
                        {validator: checkAccount, trigger: 'blur'}
                    ],
                    bindTel: [
                        {validator: checkTel, trigger: 'blur'}
                    ]
                },
            }
        },
        methods: {
            handleClick() {
                this.edit()
            },
            async edit() {
                const {data} = await getStoreAccount({storeType: 2, id: this.storeId});
                if (data.id) {
                    this.form4.userName = data.userName
                    this.form4.password = data.passWord
                    this.form4.bindTel = data.phone
                    this.form4.id = this.storeId
                    this.form4.userId = data.id
                    // this.form4 = Object.assign({}, data)
                }
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            async onSubmit() {
                // this.form3.id = this.storeId
                this.form4.id = this.storeId
                const {msg} = await posStoreAccount(this.form4);
                this.$baseMessage(msg, "success");
                this.$router.go(-1)
            },
        }
    }
</script>
<style scoped lang="scss">
    .storeinformation .el-form {
        margin-top: 20px;
    }
</style>
